<template>
  <div class="login-wrapper">
    <el-header class="header top-in">
      <Logo class="logo" />
      <!-- <LangChange class="lang" color="#293246" /> -->
    </el-header>
    <div class="login-container">
      <div class="login-left">
        <div class="login-left-wrap left-in">
          <img class="img" src="@/assets/login.png" alt="login-bg" />
        </div>
      </div>
      <div class="login-form right-in">
        <div class="form-warp">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <!-- 登录 -->
            <el-tab-pane label="登陆" name="first">
              <LoginForm />
            </el-tab-pane>
            <!-- 注册 -->
            <!-- <el-tab-pane :label="注册" name="second">
              <RegisterForm />
            </el-tab-pane> -->
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import LoginForm from "views/login/comp/LoginForm.vue";
// import RegisterForm from "./comp/RegisterForm.vue";
// import LangChange from '@/components/LangChange/index.vue';

const activeName = ref("first");

const handleClick = (val) => {
  console.log(val);
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.scss";
.login-wrapper {
  position: relative;
  .header {
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    color: #fff;
    background: transparent;
    .logo {
      justify-content: start;
      :deep(.logo-title) {
        color: #fff !important;
      }
    }
    .lang:hover {
      background: transparent;
    }
  }
  .login-container {
    display: flex;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: $light-bg-color;
    .login-left {
      position: relative;
      display: flex;
      flex-direction: column;
      width: 50vw;
      height: 100%;
      background-image: url("@/assets/login-bg-dark.svg");
      background-repeat: no-repeat;
      background-position: 100%;
      background-size: auto 100%;
      &-wrap {
        height: 80vh;
        margin: auto;
        .img {
          width: 280px;
          margin-top: 10vh;
        }
        .title,
        .desc {
          max-width: 500px;
          font-weight: bold;
          color: #fff;
          letter-spacing: 1.2px;
        }
        .desc {
          font-size: 28px;
        }
        .tip {
          color: #fff;
        }
      }
    }
    .login-form {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 50vw;
      height: 100vh;
      .form-warp {
        width: 400px;
        padding: 1rem 3rem 0 3rem;
        margin: auto;
        background-color: #fff;
        border-radius: 8px;
      }
    }
  }
}
</style>
